<template>
  <div class="th-menus">
    <div class="th-menu" :style="`text-align: ${props.align}`" v-for="item of props.data">
      <th-menu :data="item" @open="onOpen" @click="onLink(item.link)" />
      <th-menus class="th-child-menus" :data="item.children" v-show="isOpen" v-if="item.children?.length"></th-menus>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import ThMenu from "./Menu.vue";
export default defineComponent({
  name: "ThMenus",
});
</script>
<script lang="ts" setup>
import { ref, PropType } from "vue";
type Items = {
  name: string;
  link: string;
  depth?: number;
  key?: string;
  desc?: string;
  children?: Items[];
};
const props = defineProps({
  data: {
    type: Array as PropType<Items[]>,
    default: () => [],
  },
  align: {
    type: String,
    default: "left",
    validator: (val: string) => {
      return ["left", "center"].includes(val);
    },
  },
});

const isOpen = ref(false);
function onOpen() {
  isOpen.value = !isOpen.value;
}

const emits = defineEmits(["link"]);
const active = ref("");

function onLink(path: string) {
  emits("link", path);
  active.value = path;
}
</script>
